Delete Request

ביטול item אחד

פונקציית delete תבטל מידע מתוך ה-DB.

נוסיף בכל שורת מידע שיש לנו כפתור כדי לבטל את הפוסט. הכפתור הזה יוביל לפונקציית הביטול שמוגדרת בקומפוננטה.

app.component.html

<h3>All Posts</h3>
<table>
    <tr>
        <th>Title</th>
        <th>Content</th>
        <th>Delete</th>
    </tr>

    <tr *ngFor="let post of posts">
        <td>
            {{ post.title }}
        </td>
        <td>
            {{ post.content }}
        </td>
        <td><Button class="btn-delete" (click)="onDeletePost(post.id)">Delete Post</Button></td>
    </tr>
</table>

נגדיר את פונקציית ה-delete ב-service.

posts.service.ts

baseUrl = 'http://localhost:3000'

constructor(private http: HttpClient){}

createPost(post: Post){
    return this.http.post(`${baseUrl}/posts`, post);
}

getPosts(): Observable<Post[]>{
    return this.http.get<Post[]>(`${baseUrl}/posts`);
}

deletePost(id: number){
    return this.http.delete(`${baseUrl}/posts/${id}`);
}

בקובץ הקומפוננטה נקרא לפונקציית הביטול של ה-service מתוך פונקציית הלחיצה על הביטול בטבלה.

app.component.ts

constructor(private postsService: PostsService){}

onDeletePost(id: number){
    this.postsService.deletePost(id).subscribe(response => {
        console.log(response);
    });
}

ביטול כל ה-items

אם אנחנו רוצים לבטל את כל הפוסטים, אפשר לקרוא לפונקציית delete בלי להעביר אליה id.

posts.service.ts

baseUrl = 'http://localhost:3000'

constructor(private http: HttpClient){}

createPost(post: Post){
    return this.http.post(`${baseUrl}/posts`, post);
}

getPosts(): Observable<Post[]>{
    return this.http.get<Post[]>(`${baseUrl}/posts`);
}

deletePost(id: number){
    return this.http.delete(`${baseUrl}/posts/${id}`);
}

deleteAllPosts(){
    return this.http.delete(`${baseUrl}/posts/`);
}

לשים לב

ללא קריאה ל-subscribe לא תהיה קריאה לפונקציית ה-delete.